<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple theme example</title>

<!-- TinyMCE -->
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

<!-- /TinyMCE -->

</head>
<body>

<script type="text/javascript">
tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
		content_css : "/Coffee/css/style.css",
		theme_advanced_resizing : true
});

function ajaxLoad() {
        var ed = tinyMCE.get('content');

        // Do you ajax call here, window.setTimeout fakes ajax call
        ed.setProgressState(1); // Show progress
        window.setTimeout(function() {
                ed.setProgressState(0); // Hide progress
                ed.setContent('HTML content that got passed from server.');
        }, 2000);
}

function ajaxSave() {
        var ed = tinyMCE.get('content');

        // Do you ajax call here, window.setTimeout fakes ajax call
        ed.setProgressState(1); // Show progress
        window.setTimeout(function() {
                ed.setProgressState(0); // Hide progress
                alert(ed.getContent());
        }, 2000);
}
</script>

<form method="post" action="dump.php">
<textarea name="content" style="width:100%">
&lt;p&gt;This is &lt;strong&gt;my text&lt;/strong&gt; that I &lt;strong&gt;use&lt;/strong&gt; for my example.&lt;/p&gt;
</textarea>
<a href="javascript:;" onclick="ajaxLoad();return false;"><span>Load</span></a>
<a href="javascript:;" onclick="ajaxSave();return false;"><span>Save</span></a>
</form>
</body>
</html>
